<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>发动机设备运行管理系统</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link rel="stylesheet" href="statics/css/bootstrap.min.css">
    <link rel="stylesheet" href="statics/css/font-awesome.min.css">
    <link rel="stylesheet" href="statics/css/style.css">
    <link rel="stylesheet" href="statics/css/login.css">
    <link rel="stylesheet" href="statics/css/main.css">
    <link rel="stylesheet" href="statics/css/iview.css">
    <link rel="shortcut icon" href="statics/img/changan_tab_logo.png">
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="statics/libs/html5shiv.min.js"></script>
    <script src="statics/libs/respond.min.js"></script>
    <![endif]-->
    <!--    <script>-->
    <!--        var _hmt = _hmt || [];-->
    <!--        (function () {-->
    <!--            var hm = document.createElement("script");-->
    <!--            hm.src = "https://hm.baidu.com/hm.js?ccd0d22c80e2ce6d344df40fbe550fbf";-->
    <!--            var s = document.getElementsByTagName("script")[0];-->
    <!--            s.parentNode.insertBefore(hm, s);-->
    <!--        })();-->
    <!--    </script>-->
</head>
<body class="signin hold-transition login-page">
<div id="loginBox" v-cloak>
    <img src="statics/img/changan_logo.png" class="logo">
    <span class="systemName">{{systemName}}</span>
    <div class="loginscreen animated fadeInDown signinpanel">
        <div class="login-out">
            <div class="tabshead">
                <a class="cur" href="javascript:;">欢迎登录系统</a>
            </div>
            <div class="tabcont">
                <div class="log reg" style="display: block">
                    <form>
                        <div class="input-wrapper" id="accountloginwrap">
                            <div class="icon">
                                <img src="statics/img/relationship.png" style="width: 30px;height:30px;">
                            </div>
                            <input v-model="username" @on-enter="login" type="text" value="" placeholder="请输入账号"
                                   autofocus>
                        </div>
                        <div class="input-wrapper" >
                            <div class="icon">
                                <img src="statics/img/privac_open.png" style="width: 30px;height: 30px;">
                            </div>
                            <input type="password" v-model="password" @on-enter="login" value="" placeholder="请输入密码">
                        </div>
                        <div class="input-wrapper"  v-if="incorrectTimes > 5">
                            <div class="icon" >
                                <img src="statics/img/Privacy.png" style="width: 30px;height:30px;">
                            </div>
                            <input type="username" value="" v-model="captcha" @on-enter="login" style="width: 40%"
                                   placeholder="请输入验证码"  >
                            <img style="height: 95%;width: 80px;border-radius: 4px;margin-top: 1px;float: right;"
                                 alt="如果看不清楚，请单击图片刷新！" title="点击刷新"
                                 class="pointer" :src="src" @click="refreshCode" >
                        </div>
                        <input class="login-btn" @click="login" type="primary" value="登录" onclick readonly>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!-- 客服电话区域 -->
    <div class="contract">
        <Row align="bottom" justify="end">
            <i-col span="7">
                <Row align="bottom" justify="end">
                    <i-col span="24">
                        <img src="statics/img/phoneIcon.png" style="width: 34px;margin-right: 14px">
                    </i-col>
                </Row>
            </i-col>
            <i-col span="17">
                <Row type="flex" justify="start">
                    <i-col span="24">客服电话</i-col>
                </Row>
                <Row type="flex" justify="start"><i-col span="24">{{contactPhone}}</i-col></Row>
            </i-col>
        </Row>
    </div>
    <div>
        <modal v-model="visible" title="提示" @ok="handleOk" >
            <p>Chrome浏览器和系统位数不一致，可能会影响OA审批功能，请及时重装软件确保一致！</p>
        </modal>
    </div>
    <!--<div class="loginscreen animated fadeInDown footer" >-->
    <!--    &lt;!&ndash; 客服电话区域 &ndash;&gt;-->
    <!--    <div class="contract">-->
    <!--        <Row align="bottom" justify="end">-->
    <!--            <i-col span="6">-->
    <!--                <Row align="bottom" justify="end">-->
    <!--                    <i-col span="24">-->
    <!--                        <img src="statics/img/phoneIcon.png" style="width: 40px;margin-right: 5px">-->
    <!--                    </i-col>-->
    <!--                </Row>-->
    <!--            </i-col>-->
    <!--            <i-col span="18">-->
    <!--                <Row type="flex" justify="start">-->
    <!--                    <i-col span="24">客服电话</i-col>-->
    <!--                </Row>-->
    <!--                <Row type="flex" justify="start"><i-col span="24">{{contactPhone}}</i-col></Row>-->
    <!--            </i-col>-->
    <!--        </Row>-->
    <!--    </div>-->
    <!--</div>-->
</div>
<!-- /.login-box -->
<script src="/erms/statics/plugins/layui-v2.6.8/layui.js"></script>
<script src="statics/libs/jquery.min.js"></script>
<script src="statics/libs/vue.min.js"></script>
<script src="statics/libs/iview.min.js"></script>
<script src="statics/libs/bootstrap.min.js"></script>
<script src="statics/plugins/slimscroll/jquery.slimscroll.min.js"></script>
<script src="statics/libs/fastclick.min.js"></script>
<script type="text/javascript">

    var vm = new Vue({
        el: '#loginBox',
        data: {
            visible:false,
            username: '',
            password: '',
            captcha: '',
            incorrectTimes:'',//错误次数
            systemName:'发动机设备运行管理系统',
            contactPhone: '023-67592023',
            src: 'captcha.jpg'
        },
        beforeCreate: function () {
            if (self != top) {
                top.location.href = self.location.href;
            }
        },
        mounted() {
            this.checkChromeAndSystem();
        },
        methods: {
            showModal() {
                this.visible = true;
            },
            handleOk(e) {
                console.log(e);
                this.visible = false;
            },
            //浏览器位数判断
            checkChromeAndSystem() {
                // 获取浏览器类型和系统位数信息
                var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
                var is64BitChrome = navigator.userAgent.indexOf('x64') !== -1;
                var is64BitSystem = navigator.userAgent.indexOf('WOW64') !== -1 || navigator.userAgent.indexOf('Win64') !== -1;

                // 判断条件并进行弹窗提示
                if (isChrome && (is64BitChrome !== is64BitSystem)) {
                    this.showModal();
                    // alert('提示：Chrome浏览器和系统位数不一致,可能会影响OA审批功能，请及时重装软件确保一致！');
                }
            },
            refreshCode: function () {
                this.src = "captcha.jpg?t=" + $.now();
            },
            login: function (event) {

                if (vm.username == '') {
                    iview.Message.warning("用户名为空");
                    return false;
                }
                if (vm.password == '') {
                    iview.Message.warning("密码为空");
                    return false;
                }else{
                    // 校验密码中是否含有特殊字符
                    if(vm.password.match(/\+|\&|\%|\=|\*|_/g)){
                        iview.Message.error('请确保密码不含有 +&%=*_ 这5个特殊字符后进行登录！');
                        return
                    }
                }
                if(vm.incorrectTimes == null || vm.incorrectTimes < 5){
                    vm.captcha = ""
                }
                if (vm.captcha == '' && vm.incorrectTimes >5 && vm.incorrectTimes != null) {
                    iview.Message.warning("验证码为空");
                    return false;
                }


                let loginParam = {
                    username:  vm.username,
                    password: vm.password,
                    captcha: vm.captcha
                };
                $.ajax({
                    type: "POST",
                    url: "sys/login",
                    data: loginParam,
                    dataType: 'json',
                    success: function (result) {
                        if (result.code == 0) {//登录成功
                            parent.location.href = 'index.html';
                        } else {
                            vm.refreshCode();
                            iview.Message.error(result.msg);
                            if(result.incorrectTimes){
                                vm.incorrectTimes = result.incorrectTimes;
                            }
                        }
                    }
                });
            }
        },
        created: function () {
            // 监听按回车键执行登录操作
            document.onkeydown = function (e) {
                var key = window.event.keyCode;
                if (key == 13) {
                    vm.login();
                }
            }
        }
    });
</script>
</body>
</html>
